<template>
    <orh-sub-table pages :pageDate="pageDate" noPadding slot="content">
        <Tabs :value="tabVal" @on-click="tabClick" slot="table">
            <TabPane label="查看" name="see">
                <Table :columns="columns1" :data="data1" :loading="tableload"></Table>
            </TabPane>
            <TabPane :label="label" name="updata">
                <Form ref="form" :model="form" :rules="ruleValidate" label-position="top">
                    <FormItem label="选择状态" prop="state">
                        <RadioGroup v-model="form.state">
                            <Radio label="1">使用中</Radio>
                            <Radio label="2">不能使用</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="排序" prop="formorder">
                        <Input v-model="form.formorder" placeholder="输入排序(数字越大越靠前)"></Input>
                    </FormItem>
                    <FormItem label="表单显示名称" prop="show_name.zh">
                        <Input v-model="form.show_name.zh" placeholder="表单显示名称"></Input>
                    </FormItem>
                    <FormItem label="表单名称说明" prop="show_explain.zh">
                        <Input v-model="form.show_explain.zh" placeholder="表单名称说明"></Input>            
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('form')">修改</Button>
                    </FormItem>
                </Form>
            </TabPane>
            <Modal
                v-model="promptBox"
                title="更新房间数据"
                :loading="loading"
                @on-ok="asyncOK">
                <p>{{ msg }}</p>
            </Modal>
        </Tabs>
    </orh-sub-table>
</template>

<script>
export default {
    props:['items'],
    data () {
        return {
            promptBox: false,
            loading: true,
            msg:'您确定要更新房间数据吗？',
            tabVal: 'see',
            label: '添加',
            tableload:false,
            pageDate: {
                total: 0,
                current_page: 1,
                per_page: 0
            },
            columns1 : [
                {
                    title: '表单名',
                    width: 100,
                    fixed:'left',
                    align: 'center',
                    key: 'show_name'
                },
                {
                    title: '表单类型',
                    width: 150,
                    align: 'center',
                    key: 'state',
                },
                {
                    title: ' ',
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.updateSee(this.data1[params.index].formvalue_public_id)
                                    }
                                }
                            }, '编辑'),
                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    title: '您确定要删除这条数据吗?',
                                    type: 'error',
                                    size: 'small',
                                    placement:'left-end'
                                },
                                on: {
                                    'on-ok': () => {
                                        this.removeSee(this.data1[params.index].formvalue_public_id)
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    }
                                }, '删除')
                            ]),
                        ]);
                    }
                },
            ],
            data1: [],
            selUrl: 'api/watchlist/v1/watchlistvalue/list/',
            addUrl: 'api/watchlist/v1/watchlistvalue/add',
            editUrl: 'api/watchlist/v1/watchlistvalue/edit/',
            selOne: 'api/watchlist/v1/watchlistvalue/find/',
            delUrl:'api/watchlist/v1/watchlistvalue/del/',
            upid:null,
            dels:[],
            form:{
                form_public_id:this.items,
                state: 1,
                show_explain:{
                    zh:null,
                    en:null,
                    mn:null,
                },
                show_name:{
                    zh:null,
                    en:null,
                    mn:null,
                },
                formorder:null,
            },
            ruleValidate:{
                'show_name.zh':[
                    { required: true, message: '请输入表单显示名称', trigger: 'blur' }
                ],
                'show_explain.zh':[
                    { required: true, message: '请输入表单名称说明', trigger: 'blur' }
                ],
            },
            dataState: false,
        }
    },
    methods: {
        
        // ==================================================
        // 更新修改
        // ==================================================
        updateSee(val){
            this.tabVal = 'see'
            this.tabVal = 'updata'
            this.label = '修改'
            this.upid = val
            this.dataState = false
            this.selData()
        },
        
        // ==================================================
        // 删除
        // ==================================================
        removeSee (index) {
            this.dels = []
            this.dels.push(index)
            this.delData()
        },
        
        // ==================================================
        // 标签页点击事件
        // ==================================================
        tabClick(val){
            this.upid = null
            if(val == 'see'){
                this.tabVal = 'see'
                this.label = '添加'
            }
            if(val == 'updata'){
                if(this.label != '修改'){
                    this.dataState = true
                }
            }
        },
        
        // ==================================================
        // 提交按钮
        // ==================================================
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.promptBox = true
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },
        
        // ==================================================
        // 删除操作
        // ==================================================
        delData(){
            this.dels = JSON.stringify(this.dels)
            this.$http.delete(this.delUrl+this.dels).then(val=>{
                this.prompt = false
                this.tableload = true
                this.queryData(this.items)
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },
        // ==================================================
        // 添加   修改 操作
        // ==================================================
        asyncOK () {
            if(this.dataState == true){ //  添加一条心数据
                this.$http.post(this.addUrl,this.form).then(val=>{
                    this.promptBox = false
                    this.tabVal = 'see'
                    this.tableload = true
                    this.label = '添加'
                    this.queryData(this.items)
                }).catch(err=>{
                    if(err.code && err.code==422) {
                        this.$Message.error(err.message);
                    }
                })
            }
            if(this.dataState == false){ //  修改一条数据
                this.$http.post(this.editUrl+this.upid,this.form).then(val=>{
                    this.promptBox = false
                    this.tabVal = 'see'
                    this.tableload = true
                    this.label = '添加'
                    this.queryData(this.items)
                }).catch(err=>{
                    if(err.code && err.code==422) {
                        this.$Message.error(err.message);
                    }
                })
            }
            
        },
        
        // ==================================================
        // 单挑数据查询
        // ==================================================
        selData(){
            this.$http.get(this.selOne+this.upid).then(val=>{
                this.form.state = parseInt(val.data.state)
                this.form.show_name = val.data.show_name
                this.form.formorder = val.data.formorder
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },
        
        // ==================================================
        // 列表数据查询
        // ==================================================
        queryData(value){
            this.$http.get(this.selUrl+value).then(val=>{
                if(val.pages != null){
                    this.pageDate.per_page = val.pages.per_page
                    this.pageDate.total = val.pages.total
                    this.pageDate.current_page = val.pages.current_page
                }
                this.data1 = val.data
                this.tableload = false
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },
    },
    mounted(){
        this.queryData(this.items)
    },
    watch:{
        // 'items':{
        //     handler(){
        //         this.queryData(this.items)
        //     }
        // },
        // deep:true
    }
}
</script>
